<template>
  <div class="search">
    <Card>
      <Form
        ref="searchForm"
        @keydown.enter.native="handleSearch"
        :model="searchForm"
        inline
        :label-width="70"
        class="search-form"
      >
        <!-- <Form-item label="名称">
          <Input
            type="text"
            v-model="searchForm.industryName"
            placeholder="请输入名称"
            clearable
            style="width: 200px"
          />
        </Form-item> -->
        <Form-item label="状态">
          <RadioGroup v-model="searchForm.isAll" type="button" button-style="solid" style="margin-top: 0px" >
            <Radio :label="1" :value="1">全部</Radio>
            <Radio :label="2" :value="2">未读（{{countall}}）</Radio>
            
        </RadioGroup>
        </Form-item>
      
        <Button @click="handleSearch" type="primary">搜索</Button>
      </Form>
      <!-- <Row class="operation padding-row">
        <Button @click="add" type="primary">添加</Button>
      </Row> -->
      <div
        style="
          display: flex;
          white-space: nowrap;
          flex-wrap: wrap;
          padding-left: 20px;
        "
      >
        <div
          v-for="(item, index) in data"
          :key="index"
          style="width: 330px; padding: 20px"
        >
          <Card style="width: 100%">
            <!-- <div>
              <img :src="signquestion" />
            </div>
            <div>
              <img
                :src="item.createUserHread"
                style="width: 40px; height: 40px; border-radius: 20px"
              />
            </div> -->
            <div class="example" @click="getdetail(item)">
              <div class="qes">
                <img :src="signquestion" style="width: 32px; height: 32px" />
                <div
                  style="
                    line-height: 20px;
                    margin-left: 10px;
                    white-space: normal;
                    word-break: break-all;
                    word-wrap: break-word;
                  "
                >
                  {{ item.content }}
                </div>
              </div>
              <div class="ans text-gray" style="display: flex">
                <img :src="signanswer" style="width: 32px; height: 32px" />

                <div
                  style="
                    line-height: 20px;
                    white-space: normal;
                    word-break: break-all;
                    word-wrap: break-word;
                    font-weight: 550;
                    margin-left: 10px;
                  "
                >
                  {{ item.detail ? item.detail.content : "暂无回答" }}
                </div>
              </div>
            </div>
            <div style="margin-top: 4px; font-weight: 550">
              行业/分类：{{ item.industryName }}
            </div>
            <div style="display: flex; position: relative">
              <img
                :src="item.createUserHread"
                style="width: 20px; height: 20px; border-radius: 50%"
              />
              <div>
                <div style="margin-top: 5px; margin-left: 10px">
                  {{ item.createUserName }} 发布于{{
                    formdatetime(item.createTime)
                  }}
                </div>
              </div>
              <Poptip
                confirm
                title="确定删除此问答？"
                @on-ok="delwenda(item)"
                style="position: absolute; right: 10px; top: 3px"
              >
                <Icon type="md-close-circle" size="18" />
              </Poptip>
            </div>
          </Card>
        </div>
      </div>

      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <Modal
      :title="modalTitle"
      v-model="modalVisible"
      :mask-closable="false"
      :width="500"
    >
      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
        <FormItem label="行业名称" prop="industryName">
          <Input v-model="form.industryName" clearable style="width: 100%" />
        </FormItem>
        <FormItem label="行业图标" prop="industryIcon">
          <upload-pic-input
            v-model="form.industryIcon"
            style="width: 100%"
          ></upload-pic-input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modalVisible = false">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
          >提交</Button
        >
      </div>
    </Modal>
    <Drawer :closable="false" width="640" v-model="showdetail" >
      <div>
        <div style="margin-top: 4px; font-weight: 550">
          行业/分类：{{ selqitem.industryName }}
        </div>
      </div>
      <div class="demo-drawer-profile" style="margin: 10px 0">
        <img :src="signquestion" style="width: 32px; height: 32px" />
        {{ selqitem.content }}
      </div>
      <div style="display: flex">
        <img
          :src="selqitem.createUserHread"
          style="width: 20px; height: 20px; border-radius: 50%"
        />
        <div>
          <div style="margin-top: 5px; margin-left: 10px">
            {{ selqitem.createUserName }} 发布于{{
              formdatetime(selqitem.createTime)
            }}
          </div>
        </div>
      </div>
      <Divider />
      <div
        :style="pStyle"
        style="margin-top: 16px; margin-bottom: 4px; position: relative"
      >
        <div>所有回答</div>
        <Button
          type="primary"
          style="position: absolute; right: 0; top: 0"
          @click="
            addhuidashow = true;
            huidaneirong = null;
          "
          >新增回答</Button
        >
      </div>
      <div>
        <div
          class="ans text-gray"
          v-for="(item, index) in selqitem.details"
          :key="index"
        >
          <div
            v-if="selqitem.details && selqitem.details.length > 0"
            style="
              line-height: 20px;
              white-space: normal;
              word-break: break-all;
              word-wrap: break-word;
              font-weight: 550;
              margin-left: 10px;
            "
          >
            <div style="margin: 10px 0; display: flex">
              <img
                :src="item.createUserHread"
                style="width: 32px; height: 32px"
                @click="updateimgorname(item)"
              />
              <div
                @click="updateimgorname(item)"
                style="
                  margin-left: 10px;
                  font-size: 14px;
                  font-weight: 550;
                  color: #795ca0;
                  line-height: 32px;
                "
              >
                {{ item.createUserName }}
              </div>
              <div style="position: absolute; right: 20px">
                <div
                  v-if="item.isRenzheng"
                  style="display: flex; color: #19be6b; line-height: 32px"
                >
                  <div>此回答认证回答</div>
                  <Button
                    size="small"
                    type="primary"
                    style="margin-left: 10px; margin-top: 4px"
                    @click="updaterenzheng(item, false)"
                    >取消认证</Button
                  >
                </div>
                <Button
                  v-else
                  size="small"
                  type="success"
                  style="margin-left: 10px; margin-top: 4px"
                  @click="updaterenzheng(item, true)"
                  >认证回答</Button
                >
              </div>
            </div>
            <div>{{ item.content }}</div>
            <div
              style="
                width: 100%;
                text-align: right;
                margin-top: 10px;
                position: relative;
              "
            >
              <div style="margin-right: 30px">
                发布于{{ formdatetime(selqitem.createTime) }}
              </div>
              <Poptip
                confirm
                title="确定删除此回答？"
                @on-ok="deldetail(item)"
                style="position: absolute; right: 10px; top: 0px"
              >
                <Icon type="md-close-circle" size="18" />
              </Poptip>
            </div>
          </div>
          <div
            v-else
            style="
              line-height: 20px;
              white-space: normal;
              word-break: break-all;
              word-wrap: break-word;
              font-weight: 550;
              margin-left: 10px;
            "
          >
            暂无回答
          </div>
        </div>
      </div>
    </Drawer>
    <Modal v-model="addhuidashow" width="360" :z-index="99999">
      <p slot="header" style="color: #f60; text-align: center">
        <Icon type="ios-information-circle"></Icon>
        <span>新增回答</span>
      </p>
      <div style="text-align: center">
        <Input
          v-model="huidaneirong"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 5 }"
          placeholder="请输入您的回答"
        ></Input>
      </div>
      <div slot="footer">
        <Button
          type="primary"
          size="large"
          long
          :loading="baocunzhong"
          @click="savedaanfun"
          >确认提交</Button
        >
      </div>
    </Modal>
    <Modal width="1200px" v-model="picModelFlag" :z-index="999999">
      <ossManage @callback="callbackSelected" ref="ossManage" />
    </Modal>
    <Modal
      v-if="detailitem"
      v-model="descFlag"
      :title="'修改头像或昵称'"
      @on-ok="handleSubmitModal"
      width="500"
      :z-index="99999"
    >
      <Form ref="form" :model="detailitem" :label-width="80">
        <Input v-model="detailitem.id" v-show="false" />
        <FormItem label="头像">
          <img :src="detailitem.createUserHread" class="face" />
          <Button
            type="text"
            class="upload"
            @click="
              () => {
                this.picModelFlag = true;
                this.$refs.ossManage.selectImage = true;
              }
            "
            >修改</Button
          >
          <input type="file" style="display: none" id="file" />
        </FormItem>

        <FormItem label="用户昵称" prop="name">
          <Input v-model="detailitem.createUserName" style="width: 200px" />
        </FormItem>
        <FormItem label="阅读数" prop="name">
          <Input v-model="detailitem.chakanshu" style="width: 200px" />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { disableBrand, delBrand } from "@/api/goods";
import ossManage from "@/views/sys/oss-manage/ossManage";
import {
  getLiQuestions,
  getLiQuestionsDetail,
  addlLiIndustry,
  updateLiIndustry,
  delLiIndustry,
  saveQuesDetail,
  delLiQuestionsDetail,
  delliQuestions,
  updateLiQuestionsDetail,
  allcount,
} from "@/api/xiaoran";

import uploadPicInput from "@/views/my-components/lili/upload-pic-input";

import { regular } from "@/utils";
import signquestion from "@/assets/sign-question.png";
import signanswer from "@/assets/sign-answer.png";
export default {
  name: "brand",
  components: {
    uploadPicInput,
    ossManage
  },
  data() {
    return {
      picModelFlag:false,
      descFlag: false,
      detailitem: null,
      baocunzhong: false,
      huidaneirong: null,
      addhuidashow: false,
      selqitem: {},
      pStyle: {
        fontSize: "16px",
        color: "rgba(0,0,0,0.85)",
        lineHeight: "24px",
        display: "block",
        marginBottom: "16px",
      },
      showdetail: false,
      signquestion,
      signanswer,
      loading: true, // 表单加载状态
      modalType: 0, // 添加或编辑标识
      modalVisible: false, // 添加或编辑显示
      modalTitle: "", // 添加或编辑标题
      searchForm: {
        isAll:1,
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 9, // 页面大小
        sort: "create_time", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      form: {
        // 添加或编辑表单对象初始化数据
        industryName: "",
        industryIcon: "",
        deleteFlag: "",
      },
      // 表单验证规则
      formValidate: {
        industryName: [regular.REQUIRED, regular.VARCHAR20],
        industryIcon: [regular.REQUIRED, regular.URL200],
      },
      submitLoading: false, // 添加或编辑提交状态
      columns: [
        {
          title: "品牌名称",
          key: "industryName",
          width: 200,
          resizable: true,
          sortable: false,
        },
        {
          title: "品牌图标",
          key: "industryIcon",
          align: "left",
          render: (h, params) => {
            return h("img", {
              attrs: {
                src: params.row.industryIcon || "",
                alt: "加载图片失败",
              },
              style: {
                cursor: "pointer",
                width: "80px",
                height: "60px",
                margin: "10px 0",
                "object-fit": "contain",
              },
            });
          },
        },
        {
          title: "状态",
          key: "deleteFlag",
          align: "left",
          render: (h, params) => {
            if (params.row.deleteFlag == 0) {
              return h("Tag", { props: { color: "green" } }, "启用");
            } else if (params.row.deleteFlag == 1) {
              return h("Tag", { props: { color: "volcano" } }, "禁用");
            }
          },
          filters: [
            {
              label: "启用",
              value: 0,
            },
            {
              label: "禁用",
              value: 1,
            },
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value == 0) {
              return row.deleteFlag == 0;
            } else if (value == 1) {
              return row.deleteFlag == 1;
            }
          },
        },
        {
          title: "操作",
          key: "action",
          width: 180,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    },
                  },
                },
                "编辑"
              ),
              enableOrDisable,

              h(
                "Button",
                {
                  props: {
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.delBrand(params.row.id);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      countall:0,
    };
  },
  methods: {
    changesSelect(e){
      console.log("changesSelect",e)
    },
    getallcount(){
      let param={};
      allcount(param).then(res=>{

        this.countall=res.result.xinttiwen;
      })
    },
    handleSubmitModal() {
      let param = { id: this.detailitem.id };
      param["questionsId"] = this.detailitem["questionsId"];
      param["createUserHread"] = this.detailitem["createUserHread"];
      param["createUserName"] = this.detailitem["createUserName"];
      if(this.detailitem["chakanshu"]){
        param["chakanshu"] = this.detailitem["chakanshu"];
      }
      updateLiQuestionsDetail(param).then((res) => {
        this.$Message.success("更新成功");
        this.getdetail(this.selqitem);
      });
      console.log("handleSubmitModal",this.detailitem);
    },
    callbackSelected(val) {
      this.picModelFlag = false;
      this.detailitem.createUserHread = val.url;
    },
    updateimgorname(item) {
      this.detailitem = { ...item };
      this.descFlag = true;
    },
    updaterenzheng(item, state) {
      let param = { id: item.id };
      param["isRenzheng"] = state;
      updateLiQuestionsDetail(param).then((res) => {
        this.$Message.success("更新成功");
        this.getdetail(this.selqitem);
      });
    },
    delwenda(item) {
      let ids = [];
      ids.push(item.id);
      delliQuestions(ids).then((res) => {
        this.$Message.success("删除成功");
        this.getDataList();
      });
    },
    deldetail(item) {
      let ids = [];
      ids.push(item.id);
      delLiQuestionsDetail(ids).then((res) => {
        this.$Message.success("删除成功");
        this.getdetail(this.selqitem);
        this.getDataList();
      });
      console.log("111111111", item);
    },
    savedaanfun() {
      this.baocunzhong = true;
      let param = {
        userId: 0,
        isRenzheng: true,
        industryId: this.selqitem.industryId,
        questionsId: this.selqitem.id,
        parentId: 0,
        leavel: 1,
        createUserName: "小然财税",
        content: this.huidaneirong,
        createUserHread:
          "http://7n.gl.file.91golf.com/%E5%B0%8F%E7%84%B6%E8%B4%A2%E7%A8%8E%E5%95%86%E6%A0%87%E4%BD%BF%E7%94%A8%E6%96%87%E4%BB%B6-08_%E7%9C%8B%E5%9B%BE%E7%8E%8Bss.png",
      };
      saveQuesDetail(param).then((res) => {
        this.baocunzhong = false;
        this.addhuidashow = false;
        this.huidaneirong = "";
        this.$Message.success("保存成功");
        this.getdetail(this.selqitem);
      });
    },
    formdatetime(time) {
      return this.dayjs(time).format("YYYY-MM-DD HH:mm");
    },
    getdetail(item) {
      console.log("`````````````````````getdetail`````````````````");
      getLiQuestionsDetail(item.id, 0).then((res) => {
        this.showdetail = true;
        this.selqitem = res.result;
        console.log("getLiQuestionsDetail", res);
        this.getallcount();
      });
    },
    // 删除品牌
    async delBrand(id) {
      let res = await delLiIndustry(id);

      if (res.success) {
        this.$Message.success("删除成功!");
        this.getDataList();
      }
    },
    // 初始化数据
    init() {
      this.getDataList();
      this.getallcount();
      setTimeout(()=>{
        this.getallcount();
      },20*1000)
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    // 获取数据
    getDataList() {
      this.loading = true;
      getLiQuestions(this.searchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.data = res.result.records;
          this.total = res.result.total;
        }
      });
    },
    // 提交表单
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          if (this.modalType === 0) {
            // 添加 避免编辑后传入id等数据 记得删除
            delete this.form.id;
            addlLiIndustry(this.form).then((res) => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success("操作成功");
                this.getDataList();
                this.modalVisible = false;
              }
            });
          } else {
            // 编辑

            updateLiIndustry(this.form).then((res) => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success("操作成功");
                this.getDataList();
                this.modalVisible = false;
              }
            });
          }
        }
      });
    },
    // 添加
    add() {
      this.modalType = 0;
      this.modalTitle = "添加";
      this.$refs.form.resetFields();
      delete this.form.id;
      this.modalVisible = true;
    },
    // 编辑
    edit(v) {
      this.modalType = 1;
      this.modalTitle = "编辑";
      this.$refs.form.resetFields();
      // 转换null为""
      for (let attr in v) {
        if (v[attr] === null) {
          v[attr] = "";
        }
      }
      let str = JSON.stringify(v);
      let data = JSON.parse(str);
      this.form = data;
      this.modalVisible = true;
    },
    // 启用品牌
    enable(v) {
      this.$Modal.confirm({
        title: "确认启用",
        content: "您确认要启用品牌 " + v.industryName + " ?",
        loading: true,
        onOk: () => {
          disableBrand(v.id, { disable: false }).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
            }
          });
        },
      });
    },
    // 禁用
    disable(v) {
      this.$Modal.confirm({
        title: "确认禁用",
        content: "您确认要禁用品牌 " + v.industryName + " ?",
        loading: true,
        onOk: () => {
          disableBrand(v.id, { disable: true }).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
            }
          });
        },
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style scoped>
.example {
  /* overflow: scroll; */
  overflow-x: hidden;
  overflow-y: scroll;
  margin-bottom: 10px;
  height: 340px;
}
image {
  width: 32px;
  height: 32px;
  position: relative;
  top: 8px;
  margin-right: 15px;
}

.qes {
  font-size: 14px;
  font-weight: 550;
  padding: 10px 0 10px;
  line-height: 32px;
  display: flex;
}
.demo-drawer-profile {
  display: flex;
  font-size: 22px;
  font-weight: 550;
}

</style>
<style lang="scss" scoped>
/deep/ .ivu-table-wrapper {
  width: 100%;
}
/deep/ .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>
